import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Hero } from '../models/hero';
import { HeroService } from '../services/hero.service';

@Component({
  selector: 'my-dashboard',
  template: `
        <h3>Top Heroes</h3>
		<div class="grid grid-pad">
		  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
		    <div class="module hero">
		      <h4>{{hero.name}}</h4>
		    </div>
		  </div>
		</div>
  `,
  styles: [`
        [class*='col-'] {
		  float: left;
		}
		*, *:after, *:before {
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		}
		h3 {
		  text-align: center; margin-bottom: 0;
		}
		[class*='col-'] {
		  padding-right: 20px;
		  padding-bottom: 20px;
		}
		[class*='col-']:last-of-type {
		  padding-right: 0;
		}
		.grid {
		  margin: 0 0em;
		}
		.col-1-4 {
		  width: 25%;
		}
		.module {
		    padding: 20px;
		    text-align: center;
		    color: #eee;
		    max-height: 120px;
		    min-width: 120px;
		    background-color: #607D8B;
		    border-radius: 2px;
		}
		h4 {
		  position: relative;
		}
		.module:hover {
		  background-color: #EEE;
		  cursor: pointer;
		  color: #607d8b;
		}
		.grid-pad {
		  padding: 10px 0;
		}
		.grid-pad > [class*='col-']:last-of-type {
		  padding-right: 20px;
		}
		@media (max-width: 600px) {
		    .module {
		      font-size: 10px;
		      max-height: 75px; }
		}
		@media (max-width: 1024px) {
		    .grid {
		      margin: 0;
		    }
		    .module {
		      min-width: 60px;
		    }
		}
  `]
})
export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(
    private _router: Router,
    private _heroService: HeroService) {
  }

  ngOnInit() {
    this._heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1,5));
  }

  gotoDetail(hero: Hero) {
    let link = ['/detail', hero.id];
    this._router.navigate(link);
  }
}
